<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<div id="box">
		<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">
		</div>
		{{ name }}
		<button v-on:click="say" >点击我</button>
		{{str}}
		<span v-html="str"></span>
		<div v-bind:id="dynamicId">111</div>
		<input type="radio" v-bind:checked="isChecked" />
	</div>
	<div id="box2">
		{{ name }}
		<p v-if="seen">现在你看到我了</p>
	</div>
</body>
<script type="text/javascript">
	new Vue({
		el:"#box",   // 指定绑定位置
		data:{    // 指定实例化对象需要的数据
			name:"张三",
			age:30,
			isActive: true,
  			hasError: false,
  			str:"<h1>你好</h1>",
  			dynamicId:"div",
  			isChecked:true
		},
		methods:{ // 指定实例化对象里面用到的方法
			say:function(){
				alert("你好")
			}
		}
	})
	new Vue({
		el:"#box2",
		data:{
			name:"张三2",
			age:303,
			seen:false
		}
	})
</script>
</html>